<template>
  <!-- Vue3不需要根标签了 -->
  <div class="title">hello vue3</div>
  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }}: {{ value }}</li>
  </ul>
  <button @click="add">添加属性</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

/*
  vue2中data可以写对象和函数，但是组件中必须用函数形式
  vue3中data中只能写函数形式

  data数据是响应式的
    vue2 中 Object.defineProperty
      新增数据不是响应式的
        对象新增数据希望响应式：Vue.set / this.$set
        数组新增数据希望响应式：变更方法，push/pop...
    vue3 中 ES6中Proxy
      data数据都是响应式
        所以删除了Vue.set / this.$set
*/

// 增强类型推论
export default defineComponent({
  name: "App",
  data() {
    return {
      person: {
        name: "静哥",
        age: 40,
      },
    };
  },
  methods: {
    add() {
      // ts报错，vite脚手架ts报错是不影响程序运行的。
      // 验证，vue3新增数据是响应式的
      this.person.sex = "人妖";
    },
  },
});
</script>

<style scoped>
.title {
  color: red;
}
</style>
